<template>
  <div class="box">
    <!-- 头部区域 -->
    <div class="boxtop">
      <van-nav-bar title="签约">
        <template #left>
          <van-icon
            name="arrow-left"
            color="#fff"
            size="18"
            @click="clickLeft"
          ></van-icon>
        </template>
      </van-nav-bar>
    </div>
    <div class="center">
      <van-cell-group>
        <van-field
          v-model="value"
          label="客户姓名"
          placeholder="请输入用户名"
        />
        <van-field v-model="tel" type="tel" label="手机号" />
        <van-field
          v-model="value"
          label="签订日期"
          placeholder="请输入日期"
          right-icon="calendar-o"
        />
        <van-field v-model="value" label="评估价格" placeholder="请输入价格" />
        <van-field
          v-model="value"
          label="客户期望价"
          placeholder="请输入价格"
          right-icon="closed-eye"
        />
        <van-field v-model="value" label="签约价格" placeholder="请输入价格" />
        <van-field
          readonly
          clickable
          name="picker"
          :value="creaditSelet"
          label="证件类型"
          required
          placeholder="请选择"
          right-icon="arrow"
          @click="showPicker = true"
        />
        <van-popup v-model="showPicker" position="bottom">
          <van-picker
            show-toolbar
            :columns="columns"
            @confirm="onConfirm"
            @cancel="showPicker = false"
          />
        </van-popup>
        <van-field
          v-model="value"
          label="证件号码"
          placeholder="请输入证件号"
          right-icon="scan"
        />
      </van-cell-group>
    </div>
    <!-- 按钮区域 -->
    <div class="bottom">
      <van-row>
        <van-col offset="1" span="5">
          <div class="buttonLeft">保存</div>
        </van-col>
        <van-col offset="8" span="5">
          <div class="buttonRight" @click="ClickStore">去入库</div>
        </van-col>
      </van-row>
    </div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      value: '',
      tel: '',
      // 选择器的属性
      creaditSelet: '',
      columns: ['身份证', '警官证', '驾驶证', '护照', '退役士兵证'],
      showPicker: false
    }
  },
  methods: {
    clickLeft () {
      this.$router.back()
    },
    onConfirm (value) {
      this.creaditSelet = value
      this.showPicker = false
    },
    ClickStore () {
      this.$router.push('/signpicture')
    }
  }
}
</script>
<style lang="less" scoped>
.box {
  height: 20rem;
  background-color: #f6f6f9;
  .center {
    margin-top: 20px;
  }
  .bottom {
    position: absolute;
    bottom: 50px;
    left: 0;
    .buttonLeft {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 170px;
      height: 38px;
      border-radius: 19px;
      border: 1px solid #4397d4;
      background-color: #fff;
      color: #4397d4;
      font-size: 14px;
    }
    .buttonRight {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 170px;
      height: 38px;
      border-radius: 19px;
      background-color: #4397d4;
      color: #ffff;
      font-size: 14px;
    }
  }
}
</style>
